/*
 * @Date: 2022-05-24 10:17:03
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-05-24 10:25:48
 * @FilePath: \my-react-components\src\component\Progress\index.tsx
 * @Description: something
 */
import React, { memo } from "react";
import { ThemeProps } from "../Icon";
export interface IProgress {
  percent: number;
  strokeHeight?: number;
  showText?: boolean;
  styles?: React.CSSProperties;
  theme?: ThemeProps;
}
const Progress: React.FC<IProgress> = memo(
  ({ percent, strokeHeight, showText, styles, theme }) => {
    return (
      <div className="sailor-progress-bar" style={styles}>
        <div
          className="sailor-progress-bar-outer"
          style={{ height: `${strokeHeight}px` }}
        >
          <div
            className={`sailor-progress-bar-inner color-${theme}`}
            style={{ width: `${percent}%` }}
          >
            {showText && <span className="inner-text">{`${percent}%`}</span>}
          </div>
        </div>
      </div>
    );
  },
);
Progress.defaultProps = {
  strokeHeight: 15,
  showText: true,
  theme: "primary",
};
export default Progress;
